import React, { Component } from 'react';
import { Flex, WingBlank, WhiteSpace, InputItem, Button } from 'antd-mobile';
import styles from './styles.less';
import { routerRedux } from 'dva/router';
import { createForm } from 'rc-form';

class InputControl extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.control = this.refs.inputControl;
    this.props.dispatch({
      type: 'message/save',
      payload: { controlClientHeight: this.control.clientHeight },
    });
  }

  componentDidUpdate() {
    this.props.dispatch({
      type: 'message/save',
      payload: { controlClientHeight: this.control.clientHeight },
    });
  }

  submit() {
    const { dispatch, form, location, ...rest } = this.props;
    const { state: { doctorId, doctor } } = location;

    var hub = $.connection.myHub;
      // hub.server.sendToAll(form.getFieldValue('text'));
      hub.server.sendToOne(form.getFieldValue('text'));
    
      dispatch({
        type: 'message/sendMessage',
        payload: {
          doctorId,
          text: form.getFieldValue('text'),
        },
      });

    form.setFieldsValue({ 'text': '' });
  }

  successHandler(payload) {
    this.props.dispatch({
      type: 'message/sendMessage',
      payload,
    });
  }

  render() {
    const { dispatch, form, location, showTools, ...rest } = this.props;
    const { state: { doctorId, doctor } } = location;

    return (
         <form
        ref="inputControl"
        onSubmit={() => this.submit()}
        className={styles.commentEditor}>
        <div className={styles.commentInputControl}>
          <WhiteSpace />
            <WingBlank size="lg">
              <Flex justify="between">
              <InputItem {...form.getFieldProps('text')}
                className={styles.commentInput} />
                <button
                  type="button"
                  onClick={() => dispatch({
                    type: 'message/toggleTools',
                    payload: { showTools },
                  })}>
                  <img
                    className={styles.attachmentAdd}
                    src={require('../../assets/icons/icon-attachment-add.svg')} />
                </button>
            </Flex>
            </WingBlank>
          <WhiteSpace />
        </div>
        {showTools ? (
          <div className={styles.commentUploader}>
            <WhiteSpace size="xl" />
            <Flex>
              <WingBlank size="lg" className={styles.commentAction}>
                <Button onClick={() => dispatch({
                  type: 'wechat/chooseImage',
                  payload: {
                    sourceType: ['album'],
                    doctorId,
                    onSuccess: this.successHandler.bind(this),
                  },
                })}>
                  <img className={styles.commentControlIcon}
                    src={require('../../assets/icons/icon-pic.svg')} />
                </Button>
                <p>图片</p>
              </WingBlank>
              <WingBlank size="lg" className={styles.commentAction}>
                <Button onClick={() => dispatch({
                  type: 'wechat/chooseImage',
                  payload: {
                    sourceType: ['camera'],
                    doctorId,
                    onSuccess: this.successHandler.bind(this),
                  },
                })}>
                  <img className={styles.commentControlIcon}
                    src={require('../../assets/icons/icon-camera.svg')} />
                </Button>
                <p>拍照</p>
              </WingBlank>
              <WingBlank size="lg" className={styles.commentAction}>
                <Button onClick={() => dispatch(
                    routerRedux.push({
                      pathname: `/healthy/archives/tongue`,
                    }),
                )}>
                  <img className={styles.commentControlIcon}
                    src={require('../../assets/icons/icon-tongue.svg')} />
                </Button>
                <p>舌镜</p>
              </WingBlank>
            </Flex>
            <WhiteSpace size="xl" />
          </div>
        ) : null}
      </form>
    );
  }
}

export default createForm()(InputControl);
